
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-earth"></i>
                    <div class="name">earth</div>
                    <div class="fontclass">.icon-earth</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-capital-1"></i>
                    <div class="name">bullseye</div>
                    <div class="fontclass">.icon-capital-1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-polygon"></i>
                    <div class="name">多边形</div>
                    <div class="fontclass">.icon-polygon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-city-1"></i>
                    <div class="name">radio</div>
                    <div class="fontclass">.icon-city-1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-save"></i>
                    <div class="name">save</div>
                    <div class="fontclass">.icon-save</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-polyline"></i>
                    <div class="name">折线</div>
                    <div class="fontclass">.icon-polyline</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rule"></i>
                    <div class="name">测量</div>
                    <div class="fontclass">.icon-rule</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-marker"></i>
                    <div class="name">marker</div>
                    <div class="fontclass">.icon-marker</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-capital"></i>
                    <div class="name">capital</div>
                    <div class="fontclass">.icon-capital</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cavalryman"></i>
                    <div class="name">cavalryman</div>
                    <div class="fontclass">.icon-cavalryman</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ancient-soldier"></i>
                    <div class="name">ancient-soldier</div>
                    <div class="fontclass">.icon-ancient-soldier</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-archer"></i>
                    <div class="name">archer</div>
                    <div class="fontclass">.icon-archer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-county"></i>
                    <div class="name">county</div>
                    <div class="fontclass">.icon-county</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-province"></i>
                    <div class="name">province</div>
                    <div class="fontclass">.icon-province</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mountain-gun"></i>
                    <div class="name">mountain-gun</div>
                    <div class="fontclass">.icon-mountain-gun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-city"></i>
                    <div class="name">city</div>
                    <div class="fontclass">.icon-city</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-province-"></i>
                    <div class="name">province</div>
                    <div class="fontclass">.icon-province-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-triangle"></i>
                    <div class="name">triangle</div>
                    <div class="fontclass">.icon-triangle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-castle"></i>
                    <div class="name">triangle</div>
                    <div class="fontclass">.icon-castle</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tank"></i>
                    <div class="name">tank</div>
                    <div class="fontclass">.icon-tank</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hole"></i>
                    <div class="name">hole</div>
                    <div class="fontclass">.icon-hole</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shape"></i>
                    <div class="name">shape</div>
                    <div class="fontclass">.icon-shape</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close"></i>
                    <div class="name">close</div>
                    <div class="fontclass">.icon-close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-folder-open"></i>
                    <div class="name">folder_open</div>
                    <div class="fontclass">.icon-folder-open</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-download"></i>
                    <div class="name">download</div>
                    <div class="fontclass">.icon-download</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-undo"></i>
                    <div class="name">undo</div>
                    <div class="fontclass">.icon-undo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-remove"></i>
                    <div class="name">remove</div>
                    <div class="fontclass">.icon-remove</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-done"></i>
                    <div class="name">done</div>
                    <div class="fontclass">.icon-done</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-add"></i>
                    <div class="name">add</div>
                    <div class="fontclass">.icon-add</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-more_vert"></i>
                    <div class="name">more_vert</div>
                    <div class="fontclass">.icon-more_vert</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-redo"></i>
                    <div class="name">redo</div>
                    <div class="fontclass">.icon-redo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-layers"></i>
                    <div class="name">layers</div>
                    <div class="fontclass">.icon-layers</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-delete"></i>
                    <div class="name">delete</div>
                    <div class="fontclass">.icon-delete</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ic_file_download_bla"></i>
                    <div class="name">file-download</div>
                    <div class="fontclass">.icon-ic_file_download_bla</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ic_file_upload_black"></i>
                    <div class="name">file-upload</div>
                    <div class="fontclass">.icon-ic_file_upload_black</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-castle-1"></i>
                    <div class="name">castle-2</div>
                    <div class="fontclass">.icon-castle-1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-castle1"></i>
                    <div class="name">castle</div>
                    <div class="fontclass">.icon-castle1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cavalryman-2"></i>
                    <div class="name">cavalryman-1</div>
                    <div class="fontclass">.icon-cavalryman-2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cavalryman-1"></i>
                    <div class="name">cavalryman-2</div>
                    <div class="fontclass">.icon-cavalryman-1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-harbor"></i>
                    <div class="name">harbor</div>
                    <div class="fontclass">.icon-harbor</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-police"></i>
                    <div class="name">police</div>
                    <div class="fontclass">.icon-police</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shield"></i>
                    <div class="name">shield</div>
                    <div class="fontclass">.icon-shield</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ship"></i>
                    <div class="name">ship</div>
                    <div class="fontclass">.icon-ship</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ship-1"></i>
                    <div class="name">ship-1</div>
                    <div class="fontclass">.icon-ship-1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-soldier"></i>
                    <div class="name">soldier</div>
                    <div class="fontclass">.icon-soldier</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wall"></i>
                    <div class="name">wall</div>
                    <div class="fontclass">.icon-wall</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-war"></i>
                    <div class="name">war</div>
                    <div class="fontclass">.icon-war</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-airport"></i>
                    <div class="name">airport</div>
                    <div class="fontclass">.icon-airport</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bar"></i>
                    <div class="name">bar</div>
                    <div class="fontclass">.icon-bar</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bicycle-share"></i>
                    <div class="name">bicycle-share</div>
                    <div class="fontclass">.icon-bicycle-share</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-buddhism"></i>
                    <div class="name">buddhism</div>
                    <div class="fontclass">.icon-buddhism</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bus"></i>
                    <div class="name">bus</div>
                    <div class="fontclass">.icon-bus</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-car"></i>
                    <div class="name">car</div>
                    <div class="fontclass">.icon-car</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cross"></i>
                    <div class="name">cross</div>
                    <div class="fontclass">.icon-cross</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danger"></i>
                    <div class="name">danger</div>
                    <div class="fontclass">.icon-danger</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fence"></i>
                    <div class="name">fence</div>
                    <div class="fontclass">.icon-fence</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fuel"></i>
                    <div class="name">fuel</div>
                    <div class="fontclass">.icon-fuel</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-grocery"></i>
                    <div class="name">grocery</div>
                    <div class="fontclass">.icon-grocery</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-horse-riding"></i>
                    <div class="name">horse-riding-</div>
                    <div class="fontclass">.icon-horse-riding</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hospital"></i>
                    <div class="name">hospital</div>
                    <div class="fontclass">.icon-hospital</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-industry"></i>
                    <div class="name">industry</div>
                    <div class="fontclass">.icon-industry</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-library"></i>
                    <div class="name">library</div>
                    <div class="fontclass">.icon-library</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-landmark"></i>
                    <div class="name">landmark</div>
                    <div class="fontclass">.icon-landmark</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mountain"></i>
                    <div class="name">mountain</div>
                    <div class="fontclass">.icon-mountain</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-park"></i>
                    <div class="name">park</div>
                    <div class="fontclass">.icon-park</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-park-alt"></i>
                    <div class="name">park-alt</div>
                    <div class="fontclass">.icon-park-alt</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-music"></i>
                    <div class="name">music</div>
                    <div class="fontclass">.icon-music</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-place-of-worship"></i>
                    <div class="name">place-of-worship</div>
                    <div class="fontclass">.icon-place-of-worship</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-police1"></i>
                    <div class="name">police</div>
                    <div class="fontclass">.icon-police1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-post"></i>
                    <div class="name">post</div>
                    <div class="fontclass">.icon-post</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rail"></i>
                    <div class="name">rail</div>
                    <div class="fontclass">.icon-rail</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ranger-station"></i>
                    <div class="name">ranger-station</div>
                    <div class="fontclass">.icon-ranger-station</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-religious-muslim"></i>
                    <div class="name">religious-muslim</div>
                    <div class="fontclass">.icon-religious-muslim</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-religious-christian"></i>
                    <div class="name">religious-christian</div>
                    <div class="fontclass">.icon-religious-christian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-residential-communit"></i>
                    <div class="name">residential-communit</div>
                    <div class="fontclass">.icon-residential-communit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-restaurant"></i>
                    <div class="name">restaurant</div>
                    <div class="fontclass">.icon-restaurant</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-scooter"></i>
                    <div class="name">scooter</div>
                    <div class="fontclass">.icon-scooter</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-soccer"></i>
                    <div class="name">soccer</div>
                    <div class="fontclass">.icon-soccer</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-square-stroked"></i>
                    <div class="name">square-stroked</div>
                    <div class="fontclass">.icon-square-stroked</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-square"></i>
                    <div class="name">square</div>
                    <div class="fontclass">.icon-square</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star-stroked"></i>
                    <div class="name">star-stroked</div>
                    <div class="fontclass">.icon-star-stroked</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star"></i>
                    <div class="name">star</div>
                    <div class="fontclass">.icon-star</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-swimming"></i>
                    <div class="name">swimming</div>
                    <div class="fontclass">.icon-swimming</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-town"></i>
                    <div class="name">town</div>
                    <div class="fontclass">.icon-town</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-toilet"></i>
                    <div class="name">toilet</div>
                    <div class="fontclass">.icon-toilet</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-town-hall"></i>
                    <div class="name">town-hall</div>
                    <div class="fontclass">.icon-town-hall</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-triangle-1"></i>
                    <div class="name">triangle</div>
                    <div class="fontclass">.icon-triangle-1</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
